<template>
  <div class="slider">
    <h3>对轮播图组件进行测试</h3>
    <p>
      list:是图片列表数据，它是一个数组，保存要轮播图片信息<br>
      auto:2000. 开启自动播放。2000毫秒切换一张. <br>
      curIdx:初始播放第几张 <br>
    </p>
    <!-- 2000表示 每隔2s自动播放下一张 -->
    <jm-slider style="width:500px;height:350px;"
    :auto="2000"
    :curIdx="1"
    :list="list"
    @click="hClick"
    @slider="hSlider"
    >
    </jm-slider>
  </div>
</template>

<script>
export default {
  name: 'page-slider',
  data () {
    return {
      list: [
        {
          url: 'https://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1598868200&t=ec4793b060221a1991447cf4f8c1c9a6',
          alt: '图1'
        },
        {
          url: 'https://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1598868200&t=4e9da2c91dbe1b80eb0e60bdc50dc04d',
          alt: '图2'
        },
        {
          url: 'https://t9.baidu.com/it/u=2268908537,2815455140&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1598868200&t=89e62a38b7f3b835af088efe88064be8',
          alt: '图3'
        },
        {
          url: 'https://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1598868200&t=66bdbe91eeebece7b7b90a938702b831',
          alt: '图4'
        }]
    }
  },
  methods: {
    hClick (curIdx) {
      console.log('当前是', curIdx, '被点击')
    },
    hSlider (curIdx) {
      console.log('当前是', curIdx)
    }
  }
}
</script>

<style>

</style>
